<template>
  <div class="Info">
    <mt-header title="学生证">
      <mt-button icon="back" slot="left" @click="goback">返回</mt-button>
    </mt-header>
    <router-link to="/IDcard/Info">
      <div class="info" keep-alive>
        <img class="head" :src="headUrl" alt="">
        <div class="info-text">
          <p v-text="nickName"></p>
          <br>
          <p>逆袭豆&emsp;{{beans}}颗</p>
        </div>
        <img class="right" src="../assets/right.png" alt="">
      </div>
    </router-link>
    <div class="border"></div>
    <group>
      <cell :title="('我的收藏')" is-link link='IDcard/Store' value-align="left">
        <img slot="icon" width="20" style="display:block;margin-right:5px;" src="../assets/收藏.png">
      </cell>
      <cell :title="('历史纪录')" is-link link='IDcard/History' value-align="left">
        <img slot="icon" width="20" style="display:block;margin-right:5px;" src="../assets/历史.png">
      </cell>
      <cell :title="('账号绑定')" is-link link='IDcard/Bind' value-align="left">
        <img slot="icon" width="20" style="display:block;margin-right:5px;" src="../assets/绑定.png">
      </cell>
    </group>
  </div>
</template>

<script>
import { TransferDom, Actionsheet, XSwitch, Panel, Cell, Group } from "vux";

import { getUser_Axios } from "./axios/api";
export default {
    components: {
        Actionsheet,
        XSwitch,
        Panel,
        Group,
        Cell
    },
    directives: {
        TransferDom
    },
    data() {
        return {
            show2: false,
            menus2: {
                menu1: this.$t("拍照"),
                menu2: this.$t("从相册选择")
            },
            nickName: "",
            beans: "0",
            headUrl: ""
        };
    },
    mounted() {
        this.getUserInfo();
    },
    methods: {
        click(key) {},
        getUserInfo() {
            let userId = sessionStorage.getItem("id");
            getUser_Axios(userId).then(response => {
                console.log("response", response);
                this.beans = response.data.data.bean;
                this.headUrl = response.data.data.avatar;
                this.nickName = response.data.data.nickName;
            });
        }
    }
};
</script>

<style lang="scss">
.Info {
    background-color: #fbf3d0;
    height: 100vh;
    .info {
        display: flex;
        align-items: center;
        background-color: #fff;
        .head {
            height: 6rem;
            width: 6rem;
            margin: 1rem;
            border-radius: 50%;
        }
        .right {
            height: 3rem;
        }
        .info-text {
            display: flex;
            flex-direction: column;
            flex: 2;
            text-align: left;
            margin-left: 1rem;
            font-size: 1.5rem;
            color: rgb(143, 94, 5);
        }
    }
}
</style>
